@extends('layouts.layouts')
@section('title')
    <title>后台首页</title>
@endsection
@section('content')
    <script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.hcharts.cn/highstock/highstock.js"></script>
    <script src="https://cdn.hcharts.cn/highmaps/highmaps.js"></script>
    <div class="content">
        <div class="header">
            <h1 class="page-title">数据统计</h1>
            <ul class="breadcrumb">
                <li><a href="index.html">首页</a> </li>
                <li class="active">数据统计</li>
            </ul>
        </div>
        <div class="main-content">
            <div class="row">
                <div class="col-md-4" style="height:300px;" id="container"></div>
                <div class="col-md-4" style="height:300px;" id="course"></div>
                <div class="col-md-4" style="height:300px;" id="suggestion"></div>
            </div>
            <div class="row">
                <div class="col-md-5" style="height:400px;" id="userApiInfo"></div>
            </div>
        </div>
    </div>
    <script>
        var totalUser = '{{$totalUser}}';
        var registerUser = '{{$registerUser}}';
        var authorUser = '{{$authorUser}}';
        var totalArtAndCourse = [parseInt('{{$totalCourse}}'),parseInt('{{$totalArticle}}')];
        var onlineArtAndCourse = [parseInt('{{$onlineCourse}}'),parseInt('{{$onlineArticle}}')];
        var outlineArtAndCourse = [parseInt('{{$outlineCourse}}'),parseInt('{{$outlineArticle}}')];
        var studyingUser = parseInt('{{$studyingUser}}');
        var feedBackUser = parseInt('{{$feedBackUser}}');
        var consultUser = parseInt('{{$consultUser}}');
        var userApi = [];
        var userRegApi = [];
        var dateArr = [];
        var oneApi = [];
        var twoApi = [];
        @foreach($userApi as $k => $v)
            userApi['{{$k}}'] = parseInt('{{$v}}');
        @endforeach
        @foreach($userRegApi as $k => $v)
            userRegApi['{{$k}}'] = parseInt('{{$v}}');
        @endforeach
        @foreach($dateArr as $k => $v)
            dateArr['{{$k}}'] = '{{$v}}';
        @endforeach
        @foreach($oneApi as $k => $v)
           oneApi['{{$k}}'] = parseInt('{{$v}}');
        @endforeach
        @foreach($twoApi as $k => $v)
           twoApi['{{$k}}'] = parseInt('{{$v}}');
        @endforeach
        console.log(dateArr,oneApi,twoApi,userApi);
        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: '社区用户统计'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                title: {
                    text: '用户数'
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y}'
                    }
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
            },
            series: [{
                name: '统计',
                colorByPoint: true,
                data: [{
                    name: '社区总人数',
                    y: parseInt(totalUser),
                    drilldown: '社区总人数'
                }, {
                    name: '微信授权人数',
                    y: parseInt(authorUser),
                    drilldown: '微信授权人数'
                }, {
                    name: '注册人数',
                    y: parseInt(registerUser),
                    drilldown: '注册人数'
                }]
            }],
            drilldown: {
                series: [{
                    name: '社区总人数',
                    id: '社区总人数',
                    data: [
                        [
                            'v11.0',
                            24.13
                        ],
                        [
                            'v8.0',
                            17.2
                        ],
                        [
                            'v9.0',
                            8.11
                        ],
                        [
                            'v10.0',
                            5.33
                        ],
                        [
                            'v6.0',
                            1.06
                        ],
                        [
                            'v7.0',
                            0.5
                        ]
                    ]
                }, {
                    name: '微信授权人数',
                    id: '微信授权人数',
                    data: [
                        [
                            'v40.0',
                            5
                        ],
                        [
                            'v41.0',
                            4.32
                        ],
                        [
                            'v42.0',
                            3.68
                        ],
                        [
                            'v39.0',
                            2.96
                        ],
                        [
                            'v36.0',
                            2.53
                        ],
                        [
                            'v43.0',
                            1.45
                        ],
                        [
                            'v31.0',
                            1.24
                        ],
                        [
                            'v35.0',
                            0.85
                        ],
                        [
                            'v38.0',
                            0.6
                        ],
                        [
                            'v32.0',
                            0.55
                        ],
                        [
                            'v37.0',
                            0.38
                        ],
                        [
                            'v33.0',
                            0.19
                        ],
                        [
                            'v34.0',
                            0.14
                        ],
                        [
                            'v30.0',
                            0.14
                        ]
                    ]
                }, {
                    name: '注册人数',
                    id: '注册人数',
                    data: [
                        [
                            'v35',
                            2.76
                        ],
                        [
                            'v36',
                            2.32
                        ],
                        [
                            'v37',
                            2.31
                        ],
                        [
                            'v34',
                            1.27
                        ],
                        [
                            'v38',
                            1.02
                        ],
                        [
                            'v31',
                            0.33
                        ],
                        [
                            'v33',
                            0.22
                        ],
                        [
                            'v32',
                            0.15
                        ]
                    ]
                }]
            }
        });
        var chart = Highcharts.chart('course', {
            chart: {
                type: 'column'
            },
            title: {
                text: '课程文章统计'
            },
            xAxis: {
                categories: ['课程', '文章']
            },
            yAxis: {
                min: 0,
                title: {
                    text: '统计'
                },
                stackLabels: {  // 堆叠数据标签
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>'
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                            // 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
                            textOutline: 'none'
                        }
                    }
                }
            },
            series: [{
                name: '总数',
                data: totalArtAndCourse
            }, {
                name: '上线数',
                data: onlineArtAndCourse
            }, {
                name: '下线数',
                data: outlineArtAndCourse
            }]
        });
        Highcharts.chart('suggestion', {
            chart: {
                type: 'column'
            },
            title: {
                text: '意见统计'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                title: {
                    text: '统计'
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y}'
                    }
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
            },
            series: [{
                name: '统计',
                colorByPoint: true,
                data: [{
                    name: '总学习人数',
                    y: studyingUser,
                    drilldown: '总学习人数'
                }, {
                    name: '新增意见反馈',
                    y: feedBackUser,
                    drilldown: '新增意见反馈'
                }, {
                    name: '新增课程在线咨询',
                    y: consultUser,
                    drilldown: '新增课程在线咨询'
                }]
            }],
            drilldown: {
                series: [{
                    name: '总学习人数',
                    id: '总学习人数',
                    data: [
                        [
                            'v11.0',
                            24.13
                        ],
                        [
                            'v8.0',
                            17.2
                        ],
                        [
                            'v9.0',
                            8.11
                        ],
                        [
                            'v10.0',
                            5.33
                        ],
                        [
                            'v6.0',
                            1.06
                        ],
                        [
                            'v7.0',
                            0.5
                        ]
                    ]
                }, {
                    name: '新增意见反馈',
                    id: '新增意见反馈',
                    data: [
                        [
                            'v40.0',
                            5
                        ],
                        [
                            'v41.0',
                            4.32
                        ],
                        [
                            'v42.0',
                            3.68
                        ],
                        [
                            'v39.0',
                            2.96
                        ],
                        [
                            'v36.0',
                            2.53
                        ],
                        [
                            'v43.0',
                            1.45
                        ],
                        [
                            'v31.0',
                            1.24
                        ],
                        [
                            'v35.0',
                            0.85
                        ],
                        [
                            'v38.0',
                            0.6
                        ],
                        [
                            'v32.0',
                            0.55
                        ],
                        [
                            'v37.0',
                            0.38
                        ],
                        [
                            'v33.0',
                            0.19
                        ],
                        [
                            'v34.0',
                            0.14
                        ],
                        [
                            'v30.0',
                            0.14
                        ]
                    ]
                }, {
                    name: '新增课程在线咨询',
                    id: '新增课程在线咨询',
                    data: [
                        [
                            'v35',
                            2.76
                        ],
                        [
                            'v36',
                            2.32
                        ],
                        [
                            'v37',
                            2.31
                        ],
                        [
                            'v34',
                            1.27
                        ],
                        [
                            'v38',
                            1.02
                        ],
                        [
                            'v31',
                            0.33
                        ],
                        [
                            'v33',
                            0.22
                        ],
                        [
                            'v32',
                            0.15
                        ]
                    ]
                }]
            }
        });
        var chart = Highcharts.chart('userApiInfo', {
            chart: {
                type: 'line'
            },
            title: {
                text: '月用户注册量'
            },
            subtitle: {
//                text: '数据来源: WorldClimate.com'
            },
            xAxis: {
                categories: dateArr
            },
            yAxis: {
                title: {
                    text: '注册量'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        // 开启数据标签
                        enabled: true
                    },
                    // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    enableMouseTracking: false
                }
            },
            series: [{
                name: 'api',
                data: oneApi
            }, {
                name: 'api2',
                data: twoApi
            },{
                name: '总量',
                data: userApi
            }, {
                name: '注册量',
                data: userRegApi
            }]
        });

    </script>
@endsection